<template>
  <div style="height: 10px"></div>
  <div class="title" style="margin-top: 0">作业详情</div>
  <div>
    <van-cell-group inset>
      <van-cell title="作业备注" :value="detailData.Remark" />
      <Popover
        label="附件"
        Type="file"
        :required="false"
        :labelWeight="false"
        :showBtn="false"
        v-model="detailData.Files"
      />
    </van-cell-group>
  </div>
  <div>
    <div class="title">提交作业</div>
    <van-cell-group inset>
      <van-form @submit="onSubmit">
        <Popover
          labelWidth=""
          label="作业说明"
          Type="textarea"
          v-model="formData.Remark"
          :rules="[{ required: true, message: '请输入' }]"
        />
        <Popover
          label="附件"
          labelWidth=""
          Type="file"
          :required="false"
          :showSort="true"
          :detail="false"
          v-model="formData.Files"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="primary"
            :disabled="disabled"
            native-type="submit"
          >
            提交作业
          </van-button>
        </div>
      </van-form>
    </van-cell-group>
  </div>
  <div v-show="answerList && answerList.length">
    <div class="title">答复列表</div>
    <div v-for="item in answerList" class="mgb10">
      <van-cell-group inset>
        <van-cell title="答复时间" :value="item.CreateTime"></van-cell>
        <van-cell title="备注" :value="item.Remark"></van-cell>
        <van-cell
          title="教师评语"
          v-show="item.Comment"
          :value="item.Comment"
        ></van-cell>
        <van-cell title="作业评分" v-show="item.Grade">
          <van-rate color="#f7ba2a" v-model="item.Grade" readonly allow-half />
        </van-cell>
        <Popover
          label="附件"
          Type="file"
          :required="false"
          :showSort="true"
          :detail="true"
          :labelWeight="false"
          :showBtn="false"
          v-model="item.Files"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup name="MyCourseWorkDetail">
import {
  AddAnswerAssign,
  GetAssignDetail,
  GetAssignSubmitDetail
} from '@/api/afterClass/index.js';
import { ref, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useUserStore from '@/store/modules/user.js';
const userInfo = computed(() => useUserStore().userInfo);
const router = useRouter();
const formData = ref({});
const { proxy } = getCurrentInstance();
const detailData = ref({});
const answerList = ref([]);
const route = useRoute();
const disabled = ref(false);
onMounted(() => {
  getDetail();
  getCourseWorkDetail();
});

async function getDetail() {
  try {
    let res = await GetAssignDetail({ ID_Assign: route.query.ID });
    detailData.value = res.data;
  } catch (error) {
    console.log(error);
  }
}

async function getCourseWorkDetail() {
  try {
    let query = { ID_Assign: route.query.ID, Student: userInfo.value.ID };
    let res = await GetAssignSubmitDetail(query);
    answerList.value = res.data?.[0]?.['Answers'];
  } catch (error) {
    console.log(error);
  }
}

async function onSubmit(values) {
  if (values) {
    console.log(values);
    try {
      let query = {
        ID_Assign: route.query.ID,
        Remark: formData.value.Remark,
        Files:
          formData.value.Files?.map(item => {
            return {
              FileID: item.ID,
              Sort: item.Sort,
              Remark: item.Remark
            };
          }) || []
      };
      await AddAnswerAssign(query);
      disabled.value = true;
      proxy.$modal.toast('提交成功');
      formData.value = {};
      getCourseWorkDetail();
      setTimeout(() => {
        disabled.value = false;
      }, 2000);
    } catch (error) {
      console.log(error);
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-left: 16px;
  margin-top: 10px;
  margin-bottom: 4px;
  padding-left: 10px;
  font-weight: bold;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: #1989fa;
    border-radius: 2px;
  }
}
</style>
